<template>
  <el-dialog title="结算确认" width="40%" :visible.sync="visible" @close="dialogClose">
    <el-form ref="form" :model="form" class="dialog-form" label-position="right" label-width="120px">
      <!-- <el-form-item
        label="结算凭证："
      >
        <el-upload
          ref="upload"
          :file-list="fileList"
          :action="self.upload.img.url"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="uploadSuccess"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item> -->
      <el-form-item label="报销金额：">
        <label> {{ totalFuel }}元</label>
      </el-form-item>
      <el-form-item
        prop="refundableFee"
        :rules="self.page.rules.def"
        label="实际报销金额："
      >
        <el-input-number
          v-model="form.refundableFee"
          controls-position="right"
          :precision="2"
          :min="0"
        />
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="visible = false">取 消</el-button>
      <el-button size="mini" type="primary" @click="submit">提交</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'PurPaying',
  props: {
    value: {
      type: String,
      default: ''
    },
    self: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      visible: false,
      form: {
        evidence: [],
        refundableFee: null
      },
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      totalFuel: ''
    }
  },
  created() {

  },
  methods: {
    show(totalFuel) {
      this.visible = true
      this.form.evidence = []
      this.totalFuel = totalFuel
    },
    submit() {
      const that = this
      that.form.expensesId = that.value
      console.log(that.form)
      that.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        // if (that.form.evidence.length < 1) {
        //   that.$message.error('请上传凭证')
        //   return
        // }
        // that.form.evidence = JSON.stringify(that.form.evidence)
        const loading = that.$loading()
        const url = that.self.page.router.remoteUrl + '/financeAudit'
        that.self.service.post(url, that.form).then(res => {
          loading.close()
          if (res.code !== 200) {
            that.$message.error(res.message)
            return
          }
          that.$message.success('操作成功!')
          this.visible = false
          this.form.evidence = []
          that.self.reload(true)
        }).catch((e) => {
          loading.close()
        })
      })
    },
    // 上传图片
    uploadSuccess(response, file, fileList) {
      // console.log(response)
      // console.log(file)
      // console.log(fileList)
      this.form.evidence.push(response.data)
      console.log(this.form.evidence)
    },
    // 移除图片
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    // 预览图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 弹框关闭
    dialogClose() {
      this.form = {}
    }
  }
}
</script>
